import React, {Component, PropTypes} from 'react';

import CardItem from './children_com/card_item';
import HeaderChunk from './children_com/HeadeChunk';

import Relay from 'react-relay';
import {_message,_Button} from 'ANT_DE';
const message = _message,
    Button = _Button,
    ButtonGroup = Button.Group;
import {browserHistory} from 'react-router'
import './css/OrderTree.css';


import OrderTreeMutaion from './mutation/orderTreeMutaion';

function SpanItem (props){

    return (
        <span className="order_Tree--lr--span _left"  style={props.style}>
            <i className={props.i_class_1 || ""}></i>
            <span>{props.name}</span>
            <i className={props.i_class_2 || ""}></i>
        </span>
    )
}

export default class OderTree extends Component {
    constructor(props) {
        super(props);
        this.state = {
            heaMainList:[],  //左侧主头
            fabricFacList:[],  //面料厂
            AccFacList:[],   //辅料厂

            Amplification:1,


        }

        this.num = 0;
        this.emptyList = {
            id:null,
            partaName:"",
            quanty:0,
            remainQuanty:0,
            status: null,
            text:null
        }

        this.NarrowView = this.NarrowView.bind(this);
        this.AmplificationView = this.AmplificationView.bind(this);

    }
    NarrowView(){
        this.state.Amplification >= 0.75 ? this.setState({
            Amplification:this.state.Amplification-0.05
        }):message.warning('当前视图已经达到最小值');
    }

    AmplificationView(){
        this.state.Amplification < 1 ? this.setState({
            Amplification:this.state.Amplification+0.05
        }): message.warning('当前视图已经达到最大值');
    }

    componentWillMount(){
        // if(!this.props.location){ return; browserHistory.push("") }

        if(!this.props.location.state){ message.warning("请按规则进入当前页面") ;return;}
        let oid =  this.props.location.state.oid;

        Relay.Store.commitUpdate(
            new OrderTreeMutaion({
                orderId:oid
            }),
            {
                onFailure: () => {

                },
                onSuccess: (response) => {
                    let data = response.orderTree.orderTree,
                        con = JSON.parse(data.orderNodes);

                    if(data.errorCode == 0){
                        let heaMainList = [],
                            fabricFacList = [],
                            AccFacList = [];

                        const obj = {};

                        // heaMainList headMain
                        for( let key in con ){
                            if(key !== "childs"){
                                obj[key] = con[key];
                            }
                        }

                        // fabricFacList 面料厂 辅料厂
                        for(let key in con.childs){
                            if(con.childs[key].text === "3"){
                                fabricFacList.push(con.childs[key])
                            }else if(con.childs[key].text == 2){
                                AccFacList.push(con.childs[key])
                            }
                        }

                        heaMainList.push(obj);  //更新heaMainList
                        heaMainList.push(obj);
                        this.setState({
                            heaMainList:heaMainList,  //更新headMainList
                            fabricFacList,
                            AccFacList
                        })
                    }else{
                        message.error("网络错误，请刷新页面重试")
                    }
                }
            }
        )
    }

    componentDidMount(){
        //section margin 调试
        const section = this.refs.section,
            order_Tree_first = this.refs.order_Tree_first;
        section.style.marginTop = "400px";
    }

    componentDidUpdate(){}

    render() {
        const {
            heaMainList,
            fabricFacList,
            AccFacList,
            Amplification
        } = this.state;

        let arr = [],
            arr_content = JSON.parse(JSON.stringify(AccFacList));

        const list_ele = this.refs.CardList___first,col_length = Math.ceil(arr_content.length/3);

        let two_empty,no_fabric,no_accfa;

        for(let i = 0; i<col_length;i++){
            arr.push(arr_content.splice(0,3));
        }

        if(!!list_ele){
            list_ele.style.height = list_ele.clientHeight - 118 + "px";
        }

        /*
         *  布局问题
         * */
        let isFabricStyle = {},isAmplificationStyle = {},
            CardList___first = 0;

        //辅料厂没有
        if(AccFacList.length === 0){
            isFabricStyle = {marginTop:220};
            no_fabric = false
        }else{ no_fabric = true }

        // 面料厂没有
        if(fabricFacList.length === 0){
            isAmplificationStyle = {transform:"translateY(208px)"}
            no_accfa = false;
        }else{ no_accfa = true }

        //面料厂下面就一个
        if(fabricFacList.length <= 1 ){
            CardList___first = true;
        }else{
            CardList___first = false;
        }

        //  两个列表为空
        fabricFacList.length !== 0 && AccFacList.length !== 0 ? two_empty = true : two_empty = false;

        // 只有一个显示的时候
        if(no_fabric || no_accfa){
            isFabricStyle.marginLeft = 10;
            // isFabricStyle.marginRight = -15;
        }

        return <div>
            <div className="order_Tree--main">
                <header className="order_Tree--header">
                    {/*<HeaderChunk />*/}
                    {/*<div className="order_tree--Nar_Amp">*/}
                    {/*<Button onClick={this.AmplificationView} style={{marginRight:15}} icon="plus" />*/}
                    {/*<Button onClick={this.NarrowView} icon="minus" />*/}
                    {/*</div>*/}
                </header>

                {/*index == 1 && (arr.length == 0 || fabricFacList.length == 0) &&*/}
                <section className="order_Tree--section" ref="section" style={{transform:`scale(${Amplification})`}}>
                    <div className="clear_both order_Tree--left___heaMain">
                        {
                            heaMainList.map((item,index)=>
                                <div key={`${item.id}_${index}`} className="_left">
                                    <CardItem isSend={index===0 && true}
                                              data={item}
                                              className={"_left" }
                                    />
                                    {
                                        heaMainList.length-1 === index ? two_empty &&
                                        <i> </i>  : <i></i>
                                    }
                                </div>
                            )
                        }
                    </div>

                    <div className="_left order_Tree--List___container">

                        <div className="order_Tree--List___one">
                            {
                                fabricFacList.length !== 0 && <div className="order_Tree--span___first" ref="order_Tree_first">
                                    {   /* oneList 黑色小线条*/
                                        AccFacList.length !== 0 && <div className="order_Tree--line___black"></div>
                                    }
                                    <SpanItem
                                        i_class_1={(fabricFacList.length === 2 && AccFacList.length <=0) ? "hide" : "_order--left"}
                                        name={"面料厂"}
                                        style={
                                            (fabricFacList.length <= 1 && AccFacList.length === 0) ? {marginRight :"-15px",marginTop:220,marginLeft:10} :
                                                ((fabricFacList.length === 2 && AccFacList.length === 0) || AccFacList.length === 0) ? {marginTop:220,marginLeft:10,marginRight:5} :{}
                                        }
                                    />
                                    <div className="order_onw_fact"
                                         style={(fabricFacList.length === 2 && AccFacList.length <=0) ? { transform:"translateY(120px)" } : {}}
                                    >
                                        {
                                            // 面料厂下的子块，是否大于1个显示线条
                                            (fabricFacList.length > 1) && <div className="line_separate"></div>
                                        }

                                        {/*制衣厂列表*/}
                                        <ul
                                            className={"order_Tree--CardList___first "}
                                            // 面料差下面就一个 是170
                                            style={ (fabricFacList.length <= 1 && AccFacList.length === 0) ? {transform:"translateY(170px)"} :{} }>
                                            {/*fabricFacList*/}
                                            {
                                                fabricFacList.map((item,index)=>
                                                    <li key={item.id}>
                                                        <CardItem data={item} className="end_x3 _left" />
                                                        <div className="order_three_children _left">
                                                            {
                                                                item.childs &&
                                                                <div className="order_Tree--cohesion">
                                                                    <i></i>
                                                                </div>
                                                            }

                                                            {
                                                                item.childs && item.childs.length > 1 &&
                                                                <div className="small_line--separate "></div>
                                                            }



                                                            <ul className="order_three_children--list" style={
                                                                // 如果childs是一个的话，就让ul下拉
                                                                item.childs && item.childs.length <= 1 ? {transform:"translateY(-30px)",marginLeft:0} : {}
                                                            }>
                                                                {
                                                                    item.childs && item.childs.map((_1item,_1index)=>
                                                                        <li key={_1item.id}>
                                                                            <SpanItem
                                                                                i_class_1={(_1index==0 && "hide") || _1index==item.childs.length-1 && "hide"}
                                                                                i_class_2={_1index != 0 ? _1index != item.childs.length-1 ? "hide" : null : null}
                                                                                name={_1item.text === "4" ?"印染厂" :"纱线厂"}
                                                                                style={
                                                                                    item.childs &&  item.childs.length <= 1 ?  {
                                                                                        top:80,
                                                                                        marginRight:-10
                                                                                    }:{}
                                                                                }
                                                                            />
                                                                            <CardItem data={_1item} />
                                                                        </li>
                                                                    )
                                                                }
                                                            </ul>
                                                        </div>
                                                    </li>
                                                )
                                            }
                                        </ul>
                                    </div>
                                </div>
                            }


                            {
                                AccFacList.length !== 0 &&
                                <div className="order_Tree--span___end" style={ isAmplificationStyle}>
                                    {/*右侧i标签没有无边距*/}
                                    <SpanItem name={"辅料厂"}
                                              i_class_1={"_order--left"}
                                              style={
                                                  AccFacList.length === 1 ? {
                                                      marginLeft:10,marginRight:-15
                                                  } : {}
                                              }
                                    //           margin-left: 10px;
                                    // margin-right: -15px;
                                    />

                                    <div className="order_onw_fact"
                                         // 辅料厂只有一个
                                         style={
                                             AccFacList.length === 1 ? {transform:"translateY(9px)"} : {}
                                         }>
                                        {
                                            AccFacList.length !== 1 && <div className="line_separate"></div>
                                        }

                                        {/*辅料厂 下列表*/}
                                        {/*arr*/}
                                        {
                                            arr.map((item,index)=>
                                                <ul className="order_Tree--CardList___end">
                                                    {
                                                        item.map((_item,index)=>
                                                            <li key={_item.key}>
                                                                <CardItem data={_item} className="end_x3" />
                                                            </li>
                                                        )
                                                    }
                                                </ul>
                                            )
                                        }
                                    </div>
                                </div>
                            }
                        </div>
                        {/*TwoList  面料厂  辅料厂 下级分支 */}
                        <div className="order_Tree--List___two">
                            <div className="">
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    }
}
